<script setup>
import axios from "axios";
import 'vant/lib/index.css';
import {showFailToast, showSuccessToast} from "vant";
import {useRouter} from  'vue-router'
let router = useRouter();

import { ref } from 'vue';

const checked = ref(false);

function handleLogin() {
  if (!checked.value) {
    alert('请勾选用户协议和隐私政策');
  }
}

function handleOtherLogin() {
  console.log('点击了其他方式登录');
}
</script>

<template>
  <div class="container">
    <img class="avatar" src="https://example.com/avatar-placeholder.png" alt="Avatar Placeholder" />
    <h1 class="username">用户登入</h1>
    <div class="checkbox">
      <input type="checkbox" id="agreement" v-model="checked" />
      <label for="agreement">我已阅读并同意懒饭《用户协议》和《隐私政策》</label>
    </div>
    <button class="login-btn" @click="handleLogin">登录此账号</button>
    <p class="other-login" @click="handleOtherLogin">其他方式登录</p>
  </div>
</template>

<style scoped>
.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
  font-family: Arial, sans-serif;
}

.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-image: url('https://example.com/avatar-placeholder.png');
  background-size: cover;
  margin-bottom: 20px;
}

.username {
  text-align: center;
  font-size: 24px;
  color: #333;
  margin-bottom: 20px;
}

.checkbox {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.checkbox input[type="checkbox"] {
  margin-right: 10px;
}

.login-btn {
  display: block;
  width: 100%;
  max-width: 300px;
  padding: 15px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 18px;
  transition: all 0.3s ease-in-out;
}

.login-btn:hover {
  background-color: #0056b3;
}

.other-login {
  text-align: center;
  font-size: 16px;
  color: #666;
  cursor: pointer;
}
</style>